<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="ajax.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>订单信息列表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }

        .button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        .button-send {
            padding: 5px 10px;
            background-color: #1998f3;
            color: white;
            border: none;
            border-radius: 3px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        a{
            cursor: pointer;
        }
    </style>
</head>
<body>
<script>
    function updateStatus(url){
        axiosInstance.post(
            url,
            {
                headers: headersJson
            }
        ).then((res)=>{
            console.log(res.data);
            if (res.data.code == 200){
                console.log("修改成功");
                document.getElementById('msg').innerHTML = "修改成功";
                setTimeout(()=>{
                    document.getElementById('msg').innerHTML = "";
                    location.reload();
                }, 2000);
            }else {
                console.log("修改失败");
                document.getElementById('msg').innerHTML = "修改失败";
                setTimeout(()=>{
                    document.getElementById('msg').innerHTML = "";
                }, 2000);
            }
        }).catch(e=>{
            console.log(e);
            console.log("修改出现异常");
            document.getElementById('msg').innerHTML = "修改出现异常";
            setTimeout(()=>{
                document.getElementById('msg').innerHTML = "";
            }, 2000);
        })
    }

    function deleteOrder(url){
        axiosInstance.post(
            url,
            {
                headers: headersJson
            }
        ).then((res)=>{
            console.log(res.data);
            if (res.data.code == 200){
                console.log("删除成功");
                document.getElementById('msg').innerHTML = "删除成功";
                setTimeout(()=>{
                    document.getElementById('msg').innerHTML = "";
                    location.reload();
                }, 2000);
            }else {
                console.log("删除失败");
                document.getElementById('msg').innerHTML = "删除失败";
                setTimeout(()=>{
                    document.getElementById('msg').innerHTML = "";
                }, 2000);
            }
        }).catch(e=>{
            console.log(e);
            console.log("删除出现异常");
            document.getElementById('msg').innerHTML = "删除出现异常";
            setTimeout(()=>{
                document.getElementById('msg').innerHTML = "";
            }, 2000);
        })
    }
</script>
<h2>订单信息列表</h2>
<div id="msg"></div>
<table>
    <thead>
    <tr>
        <th>订单号</th>
        <th>用户名</th>
        <th>总计</th>
        <th>状态</th>
        <th>下单日期</th>
        <th>更新时间</th>
        <th>收货人</th>
        <th>送货地址</th>
        <th>联系方式</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="order" items="${orderList}">
        <tr>
            <td>${order.orderNum}</td>
            <td>${order.username}</td>
            <td>${order.total}</td>
            <td>${order.status}</td>
            <td>${order.createTime}</td>
            <td>${order.updateTime}</td>
            <td>${order.receiver}</td>
            <td width="3">${order.address}</td>
            <td>${order.contact}</td>
            <td>
                <c:if test="${order.status eq '已支付'}">
                    <a onclick="updateStatus('/order/status/${order.orderId}/${order.status}')" class="button-send">发货</a>
                </c:if>
                <c:if test="${order.status eq '已发货'}">
                    <a onclick="updateStatus('/order/status/${order.orderId}/${order.status}')" class="button">送达</a>
                </c:if>
<%--                <a class="button-delete"--%>
<%--                   onclick="{if(confirm('确定要删除吗?')){deleteOrder('/order/deleteOrderById/${order.orderId}');}return false;}" class="button button-delete">删除</a>--%>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
</html>
